<template>
  <!-- 相关课程 -->
  <div class="relatedCourses bg-fff">
    <div>
      <div class="allTeacher">
        <div
          v-if="allteacherList?.length > 0"
          class="teacher-name cursor-pointer font-size-16 color-00065"
          :class="selectTeacher == 0 ? 'bg-fff color-00085' : ''"
          @click="handelTeacher(0, '')"
        >
          <!-- @click="handleAllteacher" -->
          全部
        </div>
        <div
          class="teacher-name cursor-pointer"
          v-for="(item, index) in allteacherList"
          :key="index"
          @click="handelTeacher(index + 1, item.name)"
          :class="
            selectTeacher == index + 1 ? 'bg-fff color-2F3133' : 'color-696E76'
          "
        >
          {{ item.name }}
        </div>
      </div>
      <!-- 课程列表 -->
      <div class="course-box margin-top-16">
        <div
          class="course-list cursor-pointer margin-bottom-24"
          v-for="(item, index) in courseList"
          :key="index"
          @click="handleToCourseDetail(item)"
        >
          <img class="course-img" src="@/assets/images/pic.png" alt="" />
          <div class="margin-top-16">
            <p
              class="font-size-16 color-18191A font-weight-500 margin-bottom-24"
            >
              {{ item?.kcmc }}
            </p>
            <p class="font-size-14 color-00085 display-flex align-items-center">
              <img
                style="margin-top: 2px"
                class="icon-size-16 margin-right-8"
                src="@/assets/images/ic_teacher.png"
                alt=""
              />
              <span>教师: </span>
              <span class="oneLine">{{ item?.ghNames }}</span>
            </p>
          </div>
        </div>
      </div>
    </div>
    <!-- 分页 -->
    <div class="pagination-box">
      <el-pagination
        :page-size="coursePageSize"
        :total="total"
        layout="prev, pager, next, jumper"
        :current-page="courseCurrentPage"
        @current-change="handleCourseCurrentChange"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue'
const courseCurrentPage = ref(5)
const coursePageSize = ref(12)
const total = ref(100)
const allteacherList = ref([
  {
    index: 0,
    name: '刘亚慧'
  },
  {
    index: 1,
    name: '时浩杰'
  },
  {
    index: 2,
    name: '马海杰'
  }
]) // 所有老师列表
const selectTeacher = ref(0) // 相关课程选中的老师
// 相关课程
const courseList = ref([
  {
    audioCnt: null,
    bh: '应用统计学231;应用统计学232；',
    campus: null,
    campusNo: null,
    classRoomName: null,
    classRoomNo: null,
    classRoomNo2: null,
    classSeq: null,
    cnt: null,
    deptCode: '21100',
    deptName: null,
    deptShortName: null,
    dianzan: 0,
    endTime: null,
    englishName: null,
    ghNames: '王进',
    ghs: '20080075',
    guankan: 31,
    hasMixed: null,
    hasVideo: false,
    id: null,
    img: null,
    imgUrl: null,
    isDigitalHuman: null,
    isInspect: null,
    isYjs: null,
    kcb: '',
    kch: 'C4804021',
    kcmc: '数理统计',
    onlineCnt: 0,
    openClass: null,
    pingfen: 0,
    pingfenUser: 0,
    playStatus: null,
    serviceName: null,
    shoucang: 0,
    startTime: null,
    status: null,
    title: null,
    url: null,
    videoStatus: null,
    viewDate: null,
    xn: '2024-2025',
    xq: 2,
    xueshi: null
  },
  {
    audioCnt: null,
    bh: '应用统计学231;应用统计学232；',
    campus: null,
    campusNo: null,
    classRoomName: null,
    classRoomNo: null,
    classRoomNo2: null,
    classSeq: null,
    cnt: null,
    deptCode: '21100',
    deptName: null,
    deptShortName: null,
    dianzan: 0,
    endTime: null,
    englishName: null,
    ghNames: '王进',
    ghs: '20080075',
    guankan: 31,
    hasMixed: null,
    hasVideo: false,
    id: null,
    img: null,
    imgUrl: null,
    isDigitalHuman: null,
    isInspect: null,
    isYjs: null,
    kcb: '',
    kch: 'C4804021',
    kcmc: '数理统计',
    onlineCnt: 0,
    openClass: null,
    pingfen: 0,
    pingfenUser: 0,
    playStatus: null,
    serviceName: null,
    shoucang: 0,
    startTime: null,
    status: null,
    title: null,
    url: null,
    videoStatus: null,
    viewDate: null,
    xn: '2024-2025',
    xq: 2,
    xueshi: null
  },
  {
    audioCnt: null,
    bh: '应用统计学231;应用统计学232；',
    campus: null,
    campusNo: null,
    classRoomName: null,
    classRoomNo: null,
    classRoomNo2: null,
    classSeq: null,
    cnt: null,
    deptCode: '21100',
    deptName: null,
    deptShortName: null,
    dianzan: 0,
    endTime: null,
    englishName: null,
    ghNames: '王进',
    ghs: '20080075',
    guankan: 31,
    hasMixed: null,
    hasVideo: false,
    id: null,
    img: null,
    imgUrl: null,
    isDigitalHuman: null,
    isInspect: null,
    isYjs: null,
    kcb: '',
    kch: 'C4804021',
    kcmc: '数理统计',
    onlineCnt: 0,
    openClass: null,
    pingfen: 0,
    pingfenUser: 0,
    playStatus: null,
    serviceName: null,
    shoucang: 0,
    startTime: null,
    status: null,
    title: null,
    url: null,
    videoStatus: null,
    viewDate: null,
    xn: '2024-2025',
    xq: 2,
    xueshi: null
  },
  {
    audioCnt: null,
    bh: '应用统计学231;应用统计学232；',
    campus: null,
    campusNo: null,
    classRoomName: null,
    classRoomNo: null,
    classRoomNo2: null,
    classSeq: null,
    cnt: null,
    deptCode: '21100',
    deptName: null,
    deptShortName: null,
    dianzan: 0,
    endTime: null,
    englishName: null,
    ghNames: '王进',
    ghs: '20080075',
    guankan: 31,
    hasMixed: null,
    hasVideo: false,
    id: null,
    img: null,
    imgUrl: null,
    isDigitalHuman: null,
    isInspect: null,
    isYjs: null,
    kcb: '',
    kch: 'C4804021',
    kcmc: '数理统计',
    onlineCnt: 0,
    openClass: null,
    pingfen: 0,
    pingfenUser: 0,
    playStatus: null,
    serviceName: null,
    shoucang: 0,
    startTime: null,
    status: null,
    title: null,
    url: null,
    videoStatus: null,
    viewDate: null,
    xn: '2024-2025',
    xq: 2,
    xueshi: null
  },
  {
    audioCnt: null,
    bh: '应用统计学231;应用统计学232；',
    campus: null,
    campusNo: null,
    classRoomName: null,
    classRoomNo: null,
    classRoomNo2: null,
    classSeq: null,
    cnt: null,
    deptCode: '21100',
    deptName: null,
    deptShortName: null,
    dianzan: 0,
    endTime: null,
    englishName: null,
    ghNames: '王进',
    ghs: '20080075',
    guankan: 31,
    hasMixed: null,
    hasVideo: false,
    id: null,
    img: null,
    imgUrl: null,
    isDigitalHuman: null,
    isInspect: null,
    isYjs: null,
    kcb: '',
    kch: 'C4804021',
    kcmc: '数理统计',
    onlineCnt: 0,
    openClass: null,
    pingfen: 0,
    pingfenUser: 0,
    playStatus: null,
    serviceName: null,
    shoucang: 0,
    startTime: null,
    status: null,
    title: null,
    url: null,
    videoStatus: null,
    viewDate: null,
    xn: '2024-2025',
    xq: 2,
    xueshi: null
  }
])
const teacherid = ref()
onMounted(() => {})

const handelTeacher = async (index: any, id: any) => {
  selectTeacher.value = index
  teacherid.value = id
  handleCourseList()
}

// 获取相关课程列表
const handleCourseList = async () => {
  //   const xn = courseDetail.xn
  //   const xq = courseDetail.xq
  //   const gh = teacherid.value
  //   const pageNum = courseCurrentPage.value
  //   const pageSize = coursePageSize.value
  //   const teacherRes: any = await getrelatedCourses(xn, xq, gh, pageNum, pageSize)
  //   // console.log(teacherRes)
  //   courseTotal.value = teacherRes.total
  //   courseList.value = teacherRes.rows
}

// 相关课程点击去详情页
const handleToCourseDetail = (val: any) => {
  //   const route = router.resolve({
  //     path: '/recordedDetail',
  //     query: {
  //       kcmc: val.kcmc,
  //       kch: val.kch,
  //       img: val.img,
  //       bh: val.bh,
  //       xn: val.xn,
  //       xq: val.xq,
  //       classRoomNo: val.classRoomNo,
  //       ghs: val.ghs
  //     }
  //   }) // 解析路由路径
  //   window.open(route.href, '_blank') // 在新窗口打开
}

// 分页
const handleCourseCurrentChange = (val: any) => {
  courseCurrentPage.value = val
}
</script>

<style lang="scss" scoped>
// 相关课程
.relatedCourses {
  padding: 64px 64px 32px;
  box-sizing: border-box;
  border-radius: 12px;
  margin-top: 24px;
  margin-bottom: 32px;
  position: relative;
}
.allTeacher {
  display: inline-flex;
  padding: 4px;
  height: 32px;
  box-sizing: border-box;
  background: #eef1f5;
  border-radius: 4px 4px 4px 4px;
  .teacher-name {
    padding: 0 8px;
    border-radius: 4px;
    box-sizing: border-box;
  }
}
.course-box {
  overflow: hidden;
}
.course-list {
  width: calc((100% - 72px) / 4);
  height: 276px;
  margin-right: 24px;
  border-radius: 6px;
  float: left;
  border: 1px solid #e9e9e9;
  padding: 16px;
  box-sizing: border-box;
  .course-img {
    width: 100%;
    height: 160px;
    border-radius: 6px 6px 0px 0px;
  }
}
.course-list:hover {
  box-shadow: 0px 1px 8px 1px rgba(0, 0, 0, 0.05);
}
.course-list:nth-child(4n) {
  margin-right: 0px;
}
.oneLine {
  display: inline-block; /* 或者 block */
  max-width: 100%; /* 最大宽度为父容器宽度 */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pagination-box {
  height: 32px;
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
}
</style>
